<template>
  <div>
    <div class="search_form">
      <div>
        <el-date-picker
            v-model="seachForm.startDate"
            size="small"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"/>
        <el-date-picker
            v-model="seachForm.endDate"
            size="small"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="截止日期"/>

        <el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
        <el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
      </div>
      <div>
        <el-button size="mini" icon="el-icon-plus" @click="showAddDrawer" type="primary" v-hasPermi="['productManagement:dryLabour:insert']">新建</el-button>
        <el-button v-hasPermi="['productManagement:dryLabour:audit']" size="mini" icon="el-icon-s-check" type="primary" @click="audit">审核</el-button>
      </div>
    </div>

    <BaseTable
        :data="tableData"
        :columns="columns"
        :tableHeight="tableHeight"
        @details="getSelectRow"
        :pagination="queryall"
        @size-change="sizeChange"
        @current-change="pageChange"/>

    <el-drawer title="作业信息" :visible.sync="showZyxx" size="60%" >
      <el-form ref="zyxxForm" :model="zyxxForm" size="small" label-position="top" style="padding:10px 10px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务单元">
              <el-select v-model="zyxxForm.companyId" placeholder="请选择" :disabled="flag=='edit'">
                <el-option
                    v-for="item in companyList"
                    :key="item.companyId"
                    :label="item.companyName"
                    :value="item.companyId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供劳务单位">
              <el-select v-model="zyxxForm.customerId" placeholder="请选择" :disabled="flag=='edit'">
                <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业开始日期">
              <el-date-picker
                  v-model="zyxxForm.startDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="截止日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业截止日期">
              <el-col :span="18">
                <el-date-picker
                    v-model="zyxxForm.endDate"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="截止日期"/>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" size="mini" @click="summaryData">汇总</el-button>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="湿板方量">
              <el-input
                  placeholder="请输入内容"
                  v-model="zyxxForm.volumeWet"
                  clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="干板方量">
              <el-input
                  placeholder="请输入内容"
                  v-model="zyxxForm.volumeDry"
                  clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分选方量">
              <el-input
                  placeholder="请输入内容"
                  v-model="zyxxForm.volumeSort"
                  clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="zyxxForm.remark"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <BaseTable
          :data="detailList"
          :columns="detailColumns"
          :tableHeight="detailHeight"
          :pagination="false"/>

      <div class="demo-drawer__footer">
        <el-button type="primary"  size="mini" @click="submitData">保存</el-button>
        <el-button size="mini" @click="showZyxx= false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import api from '@/api/Product/dryLabour/index'

export default {
  components: { BaseTable },
  name: "index.vue",
  data(){
    return{
      flag:'add',
      showZyxx:false,//抽屉隐藏显示
      seachForm:{
        startDate:'',
        endDate:'',
      },
      tableHeight: window.innerHeight - 210,
      // 页码
      queryall: {
        totalNum: 0,
        startpage: 1,
        pagesize: 15
      },
      selectInfo:'',
      companyList:[],//公司集合
      customerList:[],//客户集合
      tableData:[],//主列表数据
      columns:[
        {
          prop: 'companyName',
          label: '业务单元',
          isShort: true
        },{
          prop: 'customerName',
          label: '劳务单位',
          isShort: true
        },{
          prop: 'startDate',
          label: '开始日期',
        },{
          prop: 'endDate',
          label: '结束日期',
        },{
          prop: 'volumeWet',
          label: '湿板总量',
        },{
          prop: 'volumeDry',
          label: '干板总量',
        },{
          prop: 'volumeSort',
          label: '分选总量',
        },{
          prop: 'createName',
          label: '创建人',
        },{
          prop: 'createTime',
          label: '创建日期',
        },{
          prop: 'approvalName',
          label: '审核人',
        },{
          prop: 'approvalTime',
          label: '审核日期',
        }, {
          label: '状态',
          render(h, params) {
            if (params.row.status == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '待审核'
                }
              })
            }
            return h('el-tag', {
              props: {
                size: 'mini',
                type: 'success'
              },
              domProps: {
                innerHTML: '已审核'
              }
            })
          }
        },{
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: '180',
          render: (h, params) => {
            return h(
                'div',
                {
                  class: 'btnClass'
                },
                [
                  h('el-button', {
                    props: {
                      size: 'mini'
                    },

                    domProps: {
                      // 添加标签,使用自己引入的iconfont图标
                      innerHTML:
                          "<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>详情</span></span>"
                    },
                    on: {
                      click: () => {
                        this.showDetail(params.$index, params.row)
                      }
                    }
                  }),
                ]
            )
          }
        }
      ],
      zyxxForm:{
        companyId:'',//业务单元
        companyName:'',//业务单元
        customerId:"",
        startDate:'',
        endDate:'',
        remark:'',
        volumeWet:'',
        volumeDry:'',
        volumeSort:''
      },
      detailList:[],
      detailColumns:[
        {
          label: '序号',
          render: (h, params) => {
            return h('span', {
              props: {
                size: 'mini',
                type: 'success'
              },
              domProps: {
                innerHTML: params.row.index+1
              }
            })
          }
        },{
          prop: 'enterKilnDate',
          label: '日期',
        },{
          prop: 'customerName',
          label: '货主',
        },{
          prop: 'cargoName',
          label: '货种',
        },{
          prop: 'volumeWet',
          label: '湿板方量',
        },{
          prop: 'volumeDry',
          label: '干板方量',
        },{
          prop: 'volumeSort',
          label: '分选方量',
        },
      ],
      detailHeight:200
    }
  },
  methods:{
    //提交数据
    submitData(){
      let companys = this.companyList.filter(com=>com.companyId == this.zyxxForm.companyId);

      if(companys!==undefined && companys!==null && companys.length>0){
        this.zyxxForm.companyName = companys[0].companyName;
      }

      let customers = this.customerList.filter(com=>com.customerId == this.zyxxForm.customerId);
      if(customers!==undefined && customers!==null && customers.length>0){
        this.zyxxForm.customerName = customers[0].customerName;
      }
      let params = {
        ...this.zyxxForm,
        itemList: this.detailList
      };
      if(this.flag=='add'){
        delete params.id;
      }
      api.saveDryLabour(params).then(res=>{
        this.$message.success("保存成功.");
        this.showZyxx = false;

        this.searchData();
      });
    },
    summaryData(){
      let params = `companyId=${this.zyxxForm.companyId}&customerId=${this.zyxxForm.customerId}&startDate=${this.zyxxForm.startDate}&endDate=${this.zyxxForm.endDate}`;
      api.queryDryLabour(params).then(res=>{
          this.detailList = res.data.data;
          this.zyxxForm.volumeDry = 0;
          this.zyxxForm.volumeWet = 0;
          this.zyxxForm.volumeSort = 0;
          this.detailList.forEach(detail=>{
            this.zyxxForm.volumeDry += Number((detail.volumeDry===undefined || detail.volumeDry===null || detail.volumeDry==='')?0:detail.volumeDry);
            this.zyxxForm.volumeWet += Number((detail.volumeWet===undefined || detail.volumeWet===null || detail.volumeWet==='')?0:detail.volumeWet);
            this.zyxxForm.volumeSort += Number((detail.volumeSort===undefined || detail.volumeSort===null || detail.volumeSort==='')?0:detail.volumeSort);
          });
      });
    },
    showAddDrawer(){
      this.showZyxx = true;
      this.flag = 'add';
      //重置数据
      this.zyxxForm = {
        companyId:'',//业务单元
        companyName:'',//业务单元
        customerId:"",
        startDate:'',
        endDate:'',
        remark:'',
        volumeWet:'',
        volumeDry:'',
        volumeSort:''
      };
      this.detailList = new Array();
    },
    resetSearch(){
      this.seachForm.startDate = "";
      this.seachForm.endDate = "";
    },
    searchData(){
      let params = `startDate=${this.seachForm.startDate}&endDate=${this.seachForm.endDate}`;
      api.searchData(params).then(res=>{
        this.tableData = res.data.data;
      });
    },
    // 获取行信息
    getSelectRow (row) {
      this.selectInfo = row
    },
    // 分页查询
    sizeChange(val) {
      this.queryall.pagesize = val;
      this.searchData();
    },
    // 分页查询
    pageChange(val) {
      this.queryall.startpage = val;
      this.searchData();
    },
    showDetail(index,row){
      this.flag = 'edit';
      this.zyxxForm = {
        companyId:'',//业务单元
        companyName:'',//业务单元
        customerId:"",
        startDate:'',
        endDate:'',
        remark:'',
        volumeWet:'',
        volumeDry:'',
        volumeSort:''
      };
      this.detailList = new Array();

      let params = "id=" + row.id;
      api.getDryLabourById(params).then(res=>{
          this.zyxxForm = res.data.data;
          this.detailList = res.data.data.itemList;
          if(this.detailList!==undefined && this.detailList!==null && this.detailList.length>0){
            this.detailList.forEach(item=>{
              this.$set(item,"enterKilnDate",item.workDate);
            })
          }
          this.showZyxx = true;
      });
    },
    //审核
    audit(){
      if(this.selectInfo===undefined || this.selectInfo==null || this.selectInfo===''){
        this.$message.warning("请先选择一条烘干劳务数据！！！");
        return;
      }

      this.$confirm('',{title:"审核",message:'是否审核通过选中的烘干劳务信息？'} ).then(() => {
        let params = {
          id:this.selectInfo.id
        };
        api.audit(params).then(res=>{
          this.$message.success("审核成功");

          this.searchData();
        });
      })
    }
  },
  mounted() {
    publicapi.getListComp().then(res=>{
      this.companyList = res.data.data;
    });

    publicapi.getlistCustomer().then(res=>{
      this.customerList = res.data.data
    });

    this.searchData();
  }
}
</script>

<style lang="less" scoped>
  @import "../../../assets/searchfrom.less";
  // 抽屉头部样式
  /deep/ .el-drawer__header {
    background-color: #f5f7fa;
    margin-bottom: 12px;
    padding: 16px;
    border-bottom: 1px solid gainsboro;
  }

  /deep/ .el-drawer__body {
    overflow-y: auto;
    padding-bottom: 50px;
    padding-left: 10px;
    .el-input{
      width: 280px;
    }
  }

  //抽屉底部样式
  .demo-drawer__footer {
    text-align: right;
    padding-right: 1rem;
    border-top: 1px solid #c8cfde;
    background-color: #f5f7fa;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 50px;
  }
</style>
